<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>

        <style type="text/css">
            .unlogn { width: 200px ;  border: 1px solid transparent ; font-size: 0 ;  }
            .unlogn span { display: inline-block ; vertical-align: top ; height: 16px ; width: 16px ; border: 1px solid #D0D0D0 ; border-radius: 2px ;   overflow: hidden ; }
            .unlogn span input {
                display: block ; /* 让 替换元素 input 以块元素形式显示 */
                opacity : 0;  /* 设置元素透明度 */
            }
            .unlogn label { display: inline-block ; vertical-align: top ; height: 18px ; line-height: 18px ; font-size: 14px ; }
            .unlogn .select { background-image: url("ico-checked.png") ; background-repeat: no-repeat ; }
        </style>

    </head>
    <body>

        <div class="unlogn">
            <span>
                <input type="checkbox" >
            </span>
            <label>十天内免登录</label>
        </div>

        <script type="text/javascript">
            ( function(){
                // 找到 .unlogn label 对应的首个元素
                let label = document.querySelector( ".unlogn label" );

                let span = document.querySelector( ".unlogn span" );

                let input = document.querySelector( ".unlogn span input" );

                let action = function(){

                    let list = span.classList ;

                    if( list.contains( "select" ) ) {
                        list.remove( "select" ); // span.classList.remove( "select" );
                        input.checked = false ; // 取消 checkbox 的 选中状态
                    } else {
                        list.add( "select" ) ; // span.classList.add( "select" );
                        input.checked = true ; // 增加 checkbox 的 选中状态
                    }

                }

                // 为 label 绑定点击事件监听器
                label.addEventListener( "click" , action , false );

                // 为 span 绑定点击事件监听器
                span.addEventListener( "click" , action , false );

            } )();
        </script>
        
    </body>
</html>